<template>
  <q-dialog v-model="dialog" position="right" full-height maximized>
    <q-card style="width: 350px" class="full-height">
      <q-scroll-area class="fit q-pa-md">
        <div>
          <div class="row justify-between items-center">
            <div class="text-subtitle1">{{ isEdit ? '编辑' : '新增' }}用户</div>
            <q-btn icon="close" flat dense @click="dialog = !dialog" />
          </div>
          <q-separator />
          <q-form class="column mt-10px q-gutter-y-xs">
            <q-select
              label="角色"
              v-model="formData.role_list"
              :options="filterOption"
              :option-label="(item) => item.role_name"
              multiple
              counter
              use-input
              use-chips
              input-debounce="0"
              @filter="filterFn"
            >
            </q-select>
            <q-input v-model="formData.user_no" :readonly="isEdit" label="编号" />
            <q-input
              v-if="!isEdit"
              v-model="formData.password"
              :type="isPwd ? 'password' : 'text'"
              :readonly="isEdit"
              label="密码"
            >
              <template v-slot:append>
                <q-icon
                  :name="isPwd ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="isPwd = !isPwd"
                />
              </template>
            </q-input>
            <q-input v-model="formData.user_name" label="姓名" />
            <q-input v-model="formData.nick_name" label="昵称" />
            <div class="row items-center">
              <label>性别</label>
              <q-radio
                v-model="formData.user_gender"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                val="1"
                label="男"
              />
              <q-radio
                v-model="formData.user_gender"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                val="2"
                label="女"
              />
            </div>

            <q-input v-model="formData.user_email" label="邮箱" />
            <q-input v-model="formData.user_phone" mask="###########" label="手机" />
            <div class="row items-center">
              <label>状态</label>
              <q-radio
                v-model="formData.status"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                :val="true"
                label="启用"
              />
              <q-radio
                v-model="formData.status"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                :val="false"
                label="禁用"
              />
            </div>
          </q-form>
        </div>
        <div class="row q-my-md justify-start q-gutter-sm">
          <div>
            <q-btn
              class="mr-10px"
              outline
              dense
              icon="cancel"
              label="取消"
              @click="dialog = !dialog"
            />
            <q-btn outline dense icon="save" label="保存" @click="save" />
          </div>
          <q-space />
          <q-btn
            v-if="isEdit"
            dense
            icon="pattern"
            outline
            label="密码重置"
            @click="handleRestPwd"
          />
        </div>
      </q-scroll-area>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import type { RoleList, UserIn } from 'src/api/globals'
import { addUser, updateUser, updateUserPwd } from 'src/api/methods/user'
import { useQuasar } from 'quasar'
import { ref } from 'vue'
defineOptions({
  name: 'addDialogPage',
})

const $q = useQuasar()

const dialog = defineModel<boolean>('dialog', { required: true })
const formData = defineModel<UserIn>('formData', { required: true })
const isEdit = defineModel<boolean>('isEdit', { required: true })
const currentId = defineModel<number>('currentId', { required: true })
// 自定义事件
const emit = defineEmits<{
  success: []
}>()

// 角色选项
const options: RoleList[] = [
  { role_id: 1, role_name: '超级管理员' },
  { role_id: 2, role_name: '管理员' },
  { role_id: 3, role_name: '游客' },
  { role_id: 4, role_name: '上架员' },
  { role_id: 5, role_name: '收货员' },
  { role_id: 6, role_name: '复核员' },
  { role_id: 7, role_name: '打单员' },
  { role_id: 8, role_name: '集货员' },
  { role_id: 9, role_name: '盘查员' },
  { role_id: 11, role_name: '超级管理员2' },
  { role_id: 12, role_name: '管理员2' },
  { role_id: 13, role_name: '游客2' },
  { role_id: 14, role_name: '上架员2' },
  { role_id: 15, role_name: '收货员2' },
  { role_id: 16, role_name: '复核员2' },
  { role_id: 17, role_name: '打单员2' },
  { role_id: 18, role_name: '集货员2' },
  { role_id: 19, role_name: '盘查员2' },
]

const filterOption = ref(options)

// 角色选项过滤
const filterFn = (val: string, update: (args: () => void) => void) => {
  update(() => {
    if (val === '') {
      filterOption.value = options
    } else {
      const needle = val.toLowerCase()
      filterOption.value = options.filter((v) => v.role_name.toLowerCase().includes(needle))
    }
  })
}

// 是否显示密码
const isPwd = ref(true)

// 保存
const save = async () => {
  dialog.value = false
  if (!isEdit.value) {
    await addUser(formData.value).then(() => {
      $q.notify('添加用户成功')
    })
  } else {
    await updateUser(currentId.value, formData.value).then(() => {
      isEdit.value = false
      $q.notify('编辑用户成功')
    })
  }
  emit('success')
}

// 重置密码
const handleRestPwd = () => {
  $q.dialog({
    title: '提示',
    message: '确认重置用户密码吗？',
    ok: '重置',
    cancel: '取消',
  }).onOk(() => {
    updateUserPwd(currentId.value, { password: 'gzbs' })
      .then(() => {
        $q.notify('密码已重置')
        emit('success')
      })
      .catch((err) => $q.notify(err))
  })
}
</script>

<style scoped></style>
